import { Tabs } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';

/**
 * Types
 */
import type { TabsProps } from 'antd-mobile';

type Props = TabsProps;

const ComponentTabs: React.FC<Props> = (props) => {
    /**
     * Hooks
     */
    const navigate = useNavigate();

    /**
     * ChildrenProps
     */
    const tabsProps: TabsProps = {
        activeLineMode: 'fixed',
        className: 'jj-tabs',
        defaultActiveKey: 'index',
        stretch: false,
        onChange: navigate,
        ...props,
    };

    return (
        <Tabs {...tabsProps}>
            <Tabs.Tab title="我的作品" key="/" />

            <Tabs.Tab title="来自分享" key="/share" />
        </Tabs>
    );
};

export default ComponentTabs;
